import React from 'react';
import PropTypes from 'prop-types'
import styles from '../css/input.module.css'
import { LOGIN_IMG } from "../const/imgs";
import Config from "../Config";

class InputView extends React.Component {
    static propTypes = {
        type: PropTypes.string,
        onValueChange: PropTypes.func,
        valueType: PropTypes.string,
        img: PropTypes.object,
        placeholder: PropTypes.string
    };

    componentDidUpdate(prevProps, prevState) {

    }
    constructor(props) {
        super(props);
        this.state = {
            isFocus: false,
            value: '',
            checkState: '',
            type: this.props.type ? this.props.type : 'text'
        };
    }
    handleInputChange = (event) => {
        let value = event.target.value;
        this.setState({ value });
        if (this.props['onValueChange']) {
            this.props['onValueChange'](value);
        }
    };
    handleFocus = () => {
        // this.setState({ isFocus: true });
    };
    handleBlur = () => {
        // this.setState({ isFocus: false });
        if (!this.state.value) {
            this.setState({
                checkState: ''
            })
        } else {
            this.setState({
                checkState: ''
            })
        }
    };
    Click = () => {
        if (this.props.isClear) {
            this.setState({
                value: ''
            })
        } else {
            this.setState({
                type: this.state.type === 'password' ? 'text' : 'password'
            })
        }
    }
    render() {
        const { type, label, placeholder, Click, isClear,color,bgColor,maxlength } = this.props
        let img,icon
        if (isClear) {
            img = LOGIN_IMG.DEL
            icon = LOGIN_IMG.SJ
        } else if (type === 'password') {
            img = LOGIN_IMG.BY2
            if (this.state.type === 'text') {
                img = LOGIN_IMG.EYE2
            }
            icon = LOGIN_IMG.MIMA_H
        }
        return (
                <div className={styles.input_wrapper}
                style={{border:'none',
                height:'35px',
                lineHeight:'35px',
                margin:0,
                color:color?color:null
            }}
                >
                    <input type={this.state.type}
                        className={styles.fwd_input}
                        placeholder={placeholder}
                        maxLength={maxlength?maxlength:'0'}
                        value={this.state.value}
                        ref={component => this.content = component}
                        onChange={(e) => {
                            this.handleInputChange(e)
                        }}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                        style={{
                            color:color,    
                            WebkitBoxShadow: "0 0 0 1000px "+bgColor+" inset",
                            flex:'1'
                        }}
                    />
                    
                    {this.state.value.length>0&&
                    <img
                        src={img.source.url}
                        alt=""
                        style={{
                            width: img.property.width,
                            height: img.property.height,
                            marginLeft:'10px'
                        }}
                        onClick={this.Click}
                    />}
                    {/* <span>{this.state.checkState}</span> */}
                </div>


        )
    }
}

export default InputView